<template>
  <div class="article-detail page-content">
    <div class="content">
      <!-- 信息头部 -->
      <div class="article-header">
        <h1 class="title">{{ articleTitle }}</h1>
        <div class="meta-info">
          <div class="info-item">
            <el-icon><User /></el-icon>
            <span>{{ messageAuthor }}</span>
          </div>
          <div class="info-item">
            <el-icon><Calendar /></el-icon>
            <span>{{ sendTime }}</span>
          </div>
          <div class="info-item">
            <el-icon><View /></el-icon>
            <span>{{ browseCount }} 次浏览</span>
          </div>
        </div>
        <div class="tags-container">
          <el-tag
            v-for="tag in tags"
            :key="tag"
            type="primary"
            class="tag-item"
            size="small"
            effect="plain"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>

      <!-- 信息内容 -->
      <div class="article-content">
        <div class="markdown-body" v-highlight v-html="articleHtml"></div>
      </div>
    </div>
    <ArtBackToTop />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { User, Calendar, View } from '@element-plus/icons-vue'
  import { scenicMessageGetMessageInfoByIdUsingPost, sysAuthGetLoginUserUsingPost } from '@/api/4a'
  import { useDateFormat } from '@vueuse/core'
  import '@/assets/styles/markdown.scss'
  import '@/assets/styles/one-dark-pro.scss'
  import { useCommon } from '@/composables/useCommon'
import { log } from 'console'

  const articleId = ref<string>('')
  const route = useRoute()
  const router = useRouter()
  const articleTitle = ref()
  const articleHtml = ref()
  const messageAuthor = ref()
  const browseCount = ref()
  const sendTime = ref()
  const tags = ref<string[]>([])

  // 处理标签字符串
  const processTags = (tagString: string): string[] => {
    if (!tagString) return []
    const regex = /\(([^)]+)\)/g
    const matches = tagString.match(regex)
    if (!matches) return []
    return matches.map((tag) => tag.slice(1, -1))
  }

  const getArticleDetail = async () => {
    scenicMessageGetMessageInfoByIdUsingPost({
      params: {
        messageId: articleId.value
      }
    }).then((res) => {
      articleTitle.value = res.data.messageTitle
      articleHtml.value = res.data.messageContext
      browseCount.value = res.data.browseCount
      sendTime.value = useDateFormat(res.data.sendTime, 'YYYY-MM-DD HH:mm:ss')
      tags.value = processTags(res.data.messageGambit)
    })
  }

  const getUserName = async () => {
    await sysAuthGetLoginUserUsingPost({}).then((res) => {
      if (res.code === 0) {
        messageAuthor.value = res.data?.usrName
      }
    })
  }

  onMounted(() => {
    if (!route.query.id) {
      ElMessage.error('无法获取到当前信息')
      router.push('/article/list')
    }
    useCommon().scrollToTop()
    articleId.value = route.query.id
    getArticleDetail()
    getUserName()
    
  })

  watch(
    () => route.query.id,
    (newValue) => {
      if (newValue) {
        articleId.value = newValue
        getArticleDetail()
        
      }
    },
    { immediate: true }
  )
</script>

<style lang="scss">
  .article-detail {
    .content {
      max-width: 800px;
      padding: 30px;
      margin: 40px auto;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgb(0 0 0 / 10%);

      .article-header {
        margin-bottom: 40px;
        text-align: center;

        .title {
          margin-bottom: 20px;
          font-size: 2.2em;
          font-weight: 600;
          line-height: 1.4;
          color: #2c3e50;
        }

        .meta-info {
          display: flex;
          gap: 24px;
          justify-content: center;
          margin-bottom: 20px;
          color: #666;

          .info-item {
            display: flex;
            gap: 6px;
            align-items: center;
            font-size: 14px;

            .el-icon {
              font-size: 16px;
              color: #909399;
            }
          }
        }

        .tags-container {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          justify-content: center;
          margin-top: 16px;

          .tag-item {
            height: 24px;
            padding: 0 12px;
            font-size: 12px;
            line-height: 24px;
            color: #606266;
            background: #f5f7fa;
            border-color: #e4e7ed;
            border-radius: 4px;
          }
        }
      }

      .article-content {
        .markdown-body {
          font-size: 16px;
          line-height: 1.8;
          color: #2c3e50;

          img {
            max-width: 100%;
            height: auto;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
          }

          pre {
            position: relative;
            padding: 16px;
            margin: 20px 0;
            background: #282c34;
            border-radius: 8px;

            &:hover {
              .copy-button {
                opacity: 1;
              }
            }
          }

          .code-wrapper {
            overflow-x: auto;
            border-radius: 8px;
          }

          .line-number {
            position: sticky;
            left: 0;
            z-index: 2;
            box-sizing: border-box;
            display: inline-block;
            width: 50px;
            margin-right: 10px;
            font-size: 14px;
            color: #9e9e9e;
            text-align: center;
          }

          .copy-button {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 1;
            width: 32px;
            height: 32px;
            font-size: 16px;
            line-height: 32px;
            color: #fff;
            text-align: center;
            cursor: pointer;
            background-color: rgb(255 255 255 / 10%);
            border: none;
            border-radius: 4px;
            opacity: 0;
            transition: all 0.2s;

            &:hover {
              background-color: rgb(255 255 255 / 20%);
            }
          }
        }
      }
    }
  }
</style>
